<template>
  <div class="detail">
    <!-- 头部栏 -->
    <navbar @back="back" title="文章详情" needMore="true" @more="more"></navbar>
    <!-- 文章主体 -->
    <div class="top">
      <!-- 标题 -->
      <div class="title">
        <h3 v-html="artObj.title"></h3>
      </div>
      <!-- 作者信息 -->
      <van-sticky>
        <div class="info">
          <div class="left">
            <div class="avatar">
              <img :src="artObj.aut_photo" alt="" />
            </div>
            <div class="userBox">
              <div class="username">{{ artObj.aut_name }}</div>
              <div class="time">{{ artObj.pubdate | findTime }}</div>
            </div>
          </div>
          <div class="right" @click="follow">
            <div class="attention" v-if="!artObj.is_followed">
              <div class="plus">
                +
              </div>
              关注
            </div>
            <div class="attention followed" v-else>
              已关注
            </div>
          </div>
        </div>
      </van-sticky>
      <!-- 文章内容 -->
      <div class="article" v-html="artObj.content"></div>
      <!-- 猜你喜欢 -->
      <div class="guess">
        <div>猜你喜欢</div>
        <ul class="tags">
          <li class="tag" v-for="(item, index) in 6" :key="index">
            了解微信小程序
          </li>
        </ul>
      </div>
      <!-- 点赞与不喜欢 -->
      <div class="action">
        <div class="like" @click="more">
          <div class="likeMore">MORE</div>
          <van-icon name="ellipsis" class="moreIcon" />
        </div>
        <!-- <div
          class="dislike"
          @click="dislikeAction"
          :class="{ active: artObj.attitude === 0 }"
        >
          <i class="iconfont iconbtn_delete_sel"></i> 不喜欢
        </div> -->
      </div>
      <!-- 广告 -->
      <div class="ad">
        <img src="@/assets/图层 4@2x.png" alt="" />
        <div class="title">
          前端与移动开发-课程升级V6.0 高薪技术全覆盖学前端 选择-传智播客
        </div>
      </div>
    </div>
    <!-- 评论区域 -->
    <div class="comment">
      <ul class="items">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <commentItem
            ref="comCount"
            :item="item"
            :index="index"
            v-for="(item, index) in comArr"
            :key="index"
            @replayCom="replayCom($event, index)"
            @likeCom="likeCom($event)"
            @dislikeCom="dislikeCom($event)"
          ></commentItem>
        </van-list>
      </ul>
    </div>
    <!-- 评论控件 -->
    <div class="text">
      <input
        type="text"
        v-model="value"
        placeholder="请输入搜索关键词"
        class="myInput"
        @keyup.enter="sendComment"
      />
      <van-button class="myBTN" type="primary" size="small" @click="sendComment"
        >发送</van-button
      >
    </div>
    <!-- 回复评论Popup -->
    <van-popup
      v-model="show"
      position="bottom"
      :style="{ height: '80%' }"
      class="replayPopUp"
    >
      <div class="topTitle">
        <van-icon name="cross" @click="closeReplay" />
        <div class="title">共{{ replayList.length }}回复</div>
      </div>
      <van-list
        v-model="loadingReplay"
        :finished="finishedReplay"
        finished-text="没有更多了"
        @load="onLoadReplay"
      >
        <replayItem :itemR="itemR"></replayItem>
        <p class="allRepaly">全部回复</p>
        <replayItem
          :itemR="item"
          v-for="(item, index) in replayList"
          :key="index"
          @likeCom="likeCom($event)"
          @dislikeCom="dislikeCom($event)"
        ></replayItem>
      </van-list>

      <div class="text">
        <input
          type="text"
          v-model="valueReplay"
          placeholder="请输入搜索关键词"
          class="myInput"
          @keyup.enter="sendReplay"
        />
        <van-button
          class="myBTN"
          type="primary"
          size="small"
          @click="sendReplay"
          >发送</van-button
        >
      </div>
    </van-popup>
    <!-- 更多按钮弹出层 -->
    <van-popup
      class="more"
      v-model="showMore"
      position="right"
      :style="{ height: '66%', width: '40%' }"
    >
      <div
        class="myMoreBTN"
        @click="collectArtBTN"
        :class="{ cancelCollect: artObj.is_collected === true }"
      >
        <van-icon class="myIcon" name="star-o" />
        <div class="bottomText">收藏</div>
      </div>
      <div
        class="myMoreBTN like"
        @click="likeAction"
        :class="{ likeActive: artObj.attitude === 1 }"
      >
        <van-icon class="myIcon" name="good-job-o" />
        <div class="bottomText">点赞</div>
      </div>
      <div
        class="myMoreBTN dislike"
        @click="dislikeAction"
        :class="{ dislikeActive: artObj.attitude === 0 }"
      >
        <van-icon class="myIcon" name="delete-o" />
        <div class="bottomText">不喜欢</div>
      </div>
    </van-popup>
  </div>
</template>

<script>
// 导入回复评论子组件
import replayItem from './replayItem.vue'
// 导入评论子组件
import commentItem from './commentItem.vue'
// 导入接口api
import {
  getArticleDetail,
  getArticleComment,
  sendCommentApi,
  dislikeApi,
  cancelDislikeApi,
  likeApi,
  cancelLikeApi,
  likeCom,
  cancelLikeCom,
  collectArt,
  cancelcollectArt
} from '../../../api/articles.js'
// 用户操作接口API
import { followUser, cancelFollowUser } from '../../../api/user.js'
export default {
  name: 'detail',
  components: {
    commentItem,
    replayItem
  },
  data () {
    return {
      // 文章id
      id: 0,
      // 品论点赞
      like: true,
      // 上拉加载的状态
      loading: false,
      // 上拉加载完成
      finished: false,
      // 回复加载状态
      loadingReplay: false,
      // 回复上拉加载完成
      finishedReplay: false,
      // 评论区数据
      list: [],
      // 评论输入框
      value: '',
      // 文章内容
      artObj: {},
      // 文章评论
      comArr: [],
      // 回复按钮弹出层控件
      show: false,
      // 回复输入框
      valueReplay: '',
      // 回复的数据对象
      itemR: {},
      // 回复数据列表
      replayList: [],
      // 更多按钮
      showMore: false,
      // 当前回复的评论下标
      currentReplay: 0
    }
  },
  created () {
    // this.value = ''
    // this.artObj = {}
    // this.comArr = []
  },
  methods: {
    // 文章收藏
    async collectArtBTN () {
      if (this.artObj.is_collected === false) {
        console.log(123)
        const res = await collectArt(this.id)
        console.log(res)
        this.artObj.is_collected = true
        return
      }
      const res = await cancelcollectArt(this.id)
      console.log(res)
      this.artObj.is_collected = false
    },
    // 取消点赞评论
    async dislikeCom (item) {
      console.log(item)
      const res = await cancelLikeCom(item.com_id.toString())
      console.log(res)
    },
    // 点赞评论功能
    async likeCom (item) {
      console.log(item)
      const res = await likeCom(item.com_id.toString())
      console.log(res)
    },
    // 关闭回复评论
    closeReplay () {
      this.valueReplay = ''
      this.show = false
    },
    // 回复评论
    async sendReplay () {
      // console.log(this.valueReplay)
      try {
        const res = await sendCommentApi(
          this.itemR.com_id,
          this.valueReplay,
          this.id
        )
        console.log('回复评论', res)
        this.replayList.unshift(res.data.data.new_obj)
        this.$refs.comCount[this.currentReplay].count += 1
        // this.$set(this.replayList, 0, res.data.data.new_obj)
      } catch (error) {
        console.log('回复', error)
      }
      this.valueReplay = ''
      // console.log(res)
    },
    // 回复评论开启
    async replayCom (item, index) {
      this.itemR = {}
      this.itemR = item
      console.log(this.itemR)
      console.log(index)
      // 获取回复的评论需要 转为字符串
      try {
        const resCom = await getArticleComment(
          'c',
          this.itemR.com_id.toString()
        )
        console.log('获取回复', resCom)
        this.replayList = resCom.data.data.results || []
        // this.$set(this.replayList)
        // this.replayList = resCom.data.data.results
        // console.log(this.replayList)
      } catch (error) {
        console.log('评论', error)
      }
      // 展示POPUP
      this.$nextTick(() => {
        // 获取了需要回复的评论
        this.currentReplay = index
        // console.log(this.currentReplay)
        this.show = true
      })
    },
    back () {
      console.log('back')
      this.$router.back()
    },
    // 更多
    more () {
      console.log('more')
      this.showMore = true
    },
    // 发表评论
    async sendComment () {
      try {
        const res = await sendCommentApi(this.id.toString(), this.value)
        this.comArr.unshift(res.data.data.new_obj)
        console.log('发表评论', res)
      } catch (error) {
        console.log('发送评论', error)
      }
      this.value = ''
    },
    // 回复 加载
    async onLoadReplay () {
      // 加载状态结束
      this.loadingReplay = false

      // 数据全部加载完成
      this.finishedReplay = true
    },
    // 上拉加载
    async onLoad () {
      // 文章详情获取
      try {
        this.id = this.$route.params.id
        // console.log(this.id)
        const res = await getArticleDetail(this.id.toString())
        this.artObj = res.data.data || {}
        console.log('文章详情', res)
      } catch (error) {
        console.log('文章', error)
      }

      // 文章评论获取
      try {
        const resCom = await getArticleComment('a', this.id.toString())
        this.comArr = resCom.data.data.results || []
        console.log('文章评论', resCom)
        console.log(this.comArr)
      } catch (error) {
        console.log('评论', error)
      }
      // 加载状态结束
      this.loading = false

      // 数据全部加载完成
      if (this.list.length === 0) {
        this.finished = true
      }
    },
    // 关注按钮
    async follow () {
      if (this.artObj.is_followed) {
        // 如果关注了就取消关注
        this.artObj.is_followed = false
        const res = await cancelFollowUser(this.artObj.aut_id)
        console.log(res)
        return
      }
      this.artObj.is_followed = true
      const res = await followUser(this.artObj.aut_id)
      console.log(res)
    },
    // 点赞和不喜欢
    async likeAction () {
      if (this.artObj.attitude === 1) {
        this.artObj.attitude = -1
        const res = await cancelLikeApi(this.id.toString())
        console.log(res)
        return
      }
      this.artObj.attitude = 1
      const res = await likeApi(this.id.toString())
      await cancelDislikeApi(this.id.toString())
      console.log(res)
    },
    async dislikeAction () {
      if (this.artObj.attitude === 0) {
        this.artObj.attitude = -1
        const res = await cancelDislikeApi(this.id.toString())
        console.log(res)
        console.log(this.artObj.attitude)
        return
      }
      this.artObj.attitude = 0
      const res = await dislikeApi(this.id.toString())
      await cancelLikeApi(this.id.toString())
      console.log(res)
      console.log(this.artObj.attitude)
    }
  }
}
</script>

<style lang="less" scoped>
.detail {
  font-family: Microsoft YaHei, Microsoft YaHei-Bold;
  padding-bottom: 80px;
  .top {
    padding: 24px 0px 0;
    .title {
      padding: 0 15px;
      margin-bottom: 10px;
      h3 {
        font-size: 20px;
        font-weight: 700;
        color: #3a3a3a;
        line-height: 33px;
        letter-spacing: 1px;
      }
    }
    .info {
      background-color: #fff;
      padding: 10px 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.02);
      .left {
        display: flex;
        align-items: center;

        .avatar {
          margin-right: 8px;
          width: 55px;
          height: 55px;
          border-radius: 50%;
          background-color: #404040;
          overflow: hidden;
          text-align: center;
          img {
            height: 100%;
          }
        }
        .userBox {
          font-size: 16px;
          .username {
            padding-bottom: 8px;
            color: #404040;
            font-weight: 700;
          }
          .time {
            font-size: 12px;

            color: #bbbbbb;
          }
        }
      }
      .right {
        display: flex;
        align-items: center;
        justify-content: center;
        .attention {
          height: 42px;
          width: 85px;
          font-size: 14px;
          color: #ffffff;
          border-radius: 21px;
          background-color: #3296fa;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 1px solid transparent;

          .plus {
            font-weight: 100;
            margin-right: 2px;
            margin-bottom: 2px;
            font-size: 24px;
          }
        }
        .followed {
          color: #3296fa;
          border: 1px solid #3296fa;
          background-color: transparent;
        }
      }
    }
    .article {
      margin-top: 10px;
      padding: 20px 25px;
      font-size: 16px;
      text-align: left;
      color: #474747;
      border-bottom: 1px solid #f5f6f7;
      border-top: 1px solid #f5f6f7;
      word-wrap: break-word;
      table-layout: fixed;
      word-break: break-all;
      white-space: pre-wrap;
      /deep/ p,
      /deep/ h2,
      /deep/ blockquote {
        margin: 0;
      }

      /deep/ pre {
        margin: 0;

        table-layout: fixed;
        word-break: break-all;
        white-space: pre-wrap;
      }
      /deep/ img {
        width: 100%;
      }
    }
    .guess {
      padding: 15px 15px 0;

      div {
        padding-bottom: 10px;
        font-size: 15px;
        font-weight: 700;
        color: #333333;
      }
      .tags {
        padding: 5px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .tag {
          box-sizing: border-box;
          padding-left: 20px;
          margin-bottom: 10px;
          width: 50%;
          font-size: 15px;
          font-weight: 400;
          text-align: left;
          color: #666666;
          letter-spacing: 1px;
        }
      }
    }
    .action {
      padding: 0 15px;
      margin-top: 20px;
      display: flex;
      text-align: center;
      justify-content: center;
      .like,
      .dislike {
        display: flex;
        justify-content: center;
        align-items: center;
        .likeMore {
          margin-right: 5px;
        }
        .moreIcon {
          font-size: 24px;
        }
        margin-right: 14px;
        height: 40px;
        line-height: 40px;
        width: 120px;
        font-size: 14px;
        color: #a0a0a0;
        border: 3px solid #eeeeee;
        border-radius: 25px;
      }
      .active {
        border: 1px solid #e22829;
        color: #e22829;
      }
    }
    .ad {
      margin: 26px 15px 0;
      padding: 15px 15px;
      border: 1px solid #e8e8e8;
      img {
        width: 318px;
        height: 176px;
        border-radius: 5px;
      }
      .title {
        margin-top: 8px;
        font-size: 14px;
        color: #222222;
        line-height: 20px;
        letter-spacing: 1px;
      }
    }
  }
  .comment {
    .items {
      padding: 15px 15px 0;
    }
  }
  .text {
    box-sizing: border-box;
    padding: 0 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #fff;
    height: 60px;
    box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.04);
    .myInput {
      // margin-right: 15px;
      flex: 1;
      padding: 0;
      height: 40px;
      border-radius: 20px 0 0 20px;
      border: 1px solid #cccccc;
      line-height: 40px;
      font-size: 14px;
      padding: 0 15px;
    }
    .myBTN {
      width: 80px;
      height: 42px;
      font-size: 16px;
      line-height: 42px;
      border-radius: 0 20px 20px 0;
    }
  }
  .replayPopUp {
    padding: 15px;
    padding-bottom: 60px;
    box-sizing: border-box;
    border-radius: 15px 15px 0 0;
    .topTitle {
      margin-bottom: 15px;
      position: relative;
      padding: 0;
      display: flex;
      align-items: center;
      .title {
        position: absolute;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        flex: 1;
        font-size: 18px;
      }
    }
    .allRepaly {
      margin-top: 5px;
      padding: 15px 0 5px;
      font-size: 16px;
      color: #262626;
      border-top: 1px solid #e8e8e8;
    }
  }
  .more {
    border-radius: 35px 0 0 35px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .myMoreBTN {
      margin: 10px 0;
      position: relative;
      display: flex;
      flex-direction: column;
      text-align: center;
      justify-content: center;
      width: 100px;
      height: 100px;
      background-color: rgb(255, 208, 0);
      color: white;
      border-radius: 20px 35px 20px 35px;
      border: 5px solid transparent;
      .myIcon {
        position: absolute;
        top: 10%;
        left: 50%;
        transform: translateX(-50%);
        font-size: 44px;
        font-weight: thin;
      }
      .bottomText {
        position: absolute;
        bottom: 20%;
        transform: translateX(50%);
        right: 50%;
        font-size: 18px;
        letter-spacing: 2px;
        font-weight: bold;
        font-style: italic;
        white-space: nowrap;
      }
    }
    .dislike {
      background-color: #fe2857;
    }
    .like {
      background-color: #07c3f2;
    }
    .likeActive {
      background-color: #fff;
      border: 5px solid #07c3f2;
      color: #03a9d3;
    }
    .dislikeActive {
      background-color: #fff;
      border: 5px solid #fe2857;
      color: #df1541;
    }
    .cancelCollect {
      background-color: #fff;
      border: 5px solid rgb(255, 208, 0);
      color: rgb(247, 201, 0);
    }
  }
}
</style>
